<template>
  <div class="calendar-container">
    <div class="calendar-bar">
      <div class="calendar-bar-item calendar-bar-item-1">
        <span class="active">日历</span>
      </div>
      <div class="calendar-short-line" style="left: 34px"></div>
    </div>

    <div class="calendar-content">
      <div class="calendar-body">
        <header class="calendar-body-head">
          <div class="calendar-body-head-time">
            {{ currentYear }}年{{ currentMonth }}月
            <img
              src="https://rescdn.qqmail.com/qqmail/images/calendarMonthIcon.png"
              class="calendar-body-head-time-icon"
            />
          </div>

          <div class="calendar-body-head-page">
            <span class="calendar-back" @click="prevMonth">
              <i class="xm_icons xm_icons_LeftArrow"> < </i>
            </span>

            <span class="calendar-date">今天</span>

            <span class="calendar-prev" @click="nextMonth">
              <i class="xm_icons xm_icons_RightArrow"> > </i>
            </span>
          </div>
        </header>

        <div class="calendar-month">
          <header class="grid-head">
            <div class="grid-head-column">周日</div>
            <div class="grid-head-column">周一</div>
            <div class="grid-head-column">周二</div>
            <div class="grid-head-column">周三</div>
            <div class="grid-head-column">周四</div>
            <div class="grid-head-column">周五</div>
            <div class="grid-head-column">周六</div>
          </header>
          <section class="grid-body">
            <div
              v-for="(day, index) in daysInMonth"
              :key="index"
              class="grid-cell"
              :class="{
                currentMonth: day.month === currentMonth,
                highlighted: isHighlighted(day),
              }"
              style="height: 20%"
              @click="highlightDate(day)"
            >
              <div class="grid-cell-head">
                <div class="gride-cell-head-number">
                  <span
                    class="time-date"
                    :class="{ currentMonthDate: day.month === currentMonth }"
                    >{{ day.date }}</span
                  >
                </div>
                <div class="lunar-text">
                  <!-- 这里可以添加农历计算逻辑 -->
                  {{ getLunarDate(day) }}
                </div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, onMounted } from "vue";
import { Solar, Lunar } from "lunar-javascript";

export default defineComponent({
  name: "Calendar",
  setup() {
    const currentDate = ref(new Date());
    const currentYear = computed(() => currentDate.value.getFullYear());
    const currentMonth = computed(() => currentDate.value.getMonth() + 1);

    const today = new Date();
    const todayYear = today.getFullYear();
    const todayMonth = today.getMonth() + 1;
    const todayDate = today.getDate();

    const highlightedDate = ref({
      year: todayYear,
      month: todayMonth,
      date: todayDate,
    });

    const getDaysInMonth = (year: number, month: number) => {
      const firstDay = new Date(year, month - 1, 1);
      const firstDayOfWeek = firstDay.getDay();
      const lastDay = new Date(year, month, 0);
      const daysInMonth = lastDay.getDate();

      const days = [];
      // 填充上个月的空白
      for (let i = 0; i < firstDayOfWeek; i++) {
        const prevMonthLastDay = new Date(year, month - 1, 0).getDate();
        days.push({
          date: prevMonthLastDay - firstDayOfWeek + i + 1,
          month: month - 1,
        });
      }
      // 填充当前月的日期
      for (let i = 1; i <= daysInMonth; i++) {
        days.push({ date: i, month });
      }
      // 填充下个月的空白
      const remainingCells = 42 - days.length;
      for (let i = 1; i <= remainingCells; i++) {
        days.push({ date: i, month: month + 1 });
      }
      return days;
    };

    const daysInMonth = computed(() =>
      getDaysInMonth(currentYear.value, currentMonth.value)
    );

    const prevMonth = () => {
      currentDate.value = new Date(
        currentYear.value,
        currentMonth.value - 2,
        1
      );
    };

    const nextMonth = () => {
      currentDate.value = new Date(currentYear.value, currentMonth.value, 1);
    };

    const getLunarDate = (day: { date: number; month: number }) => {
      const solar = Solar.fromYmdHms(
        currentYear.value,
        day.month,
        day.date,
        0,
        0,
        0
      );
      const lunar = solar.getLunar();
      return lunar.getMonthInChinese() + lunar.getDayInChinese();
    };

    const isHighlighted = (day: { date: number; month: number }) => {
      return (
        day.month === highlightedDate.value.month &&
        day.date === highlightedDate.value.date &&
        currentYear.value === highlightedDate.value.year
      );
    };

    const highlightDate = (day: { date: number; month: number }) => {
      highlightedDate.value = {
        year: currentYear.value,
        month: day.month,
        date: day.date,
      };
    };

    onMounted(() => {
      // 初始化日历
      currentDate.value = new Date();
    });

    return {
      currentYear,
      currentMonth,
      daysInMonth,
      prevMonth,
      nextMonth,
      getLunarDate,
      isHighlighted,
      highlightDate,
    };
  },
});
</script>

<style scoped>
.calendar-container {
  background: #fff;
  color: #5c6166;
  font-size: 13px;
  height: 100%;
  min-width: 684px;
  overflow-x: auto;
  position: relative;
  width: 100%;
}

.calendar-container .calendar-bar {
  border-bottom: 1px solid #e6e8eb;
  box-sizing: border-box;
  display: flex;
  padding: 12px 0;
  position: relative;
  width: 100%;
}

.calendar-container .calendar-bar .calendar-bar-item {
  cursor: pointer;
  line-height: 24px;
  text-align: center;
  width: 85px;
  color: #2e3033;
}

.calendar-container .calendar-bar .calendar-short-line {
  background: #2e3033;
  border-radius: 1px;
  height: 2px;
  left: 34px;
  position: absolute;
  top: 47px;
  transition: left 0.2s ease, -webkit-transform 0.2s ease;
  width: 15px;
  z-index: 10;
}

.calendar-container .calendar-content {
  display: flex;
  height: calc(100% - 50px);
  overflow-x: auto;
  overflow-y: hidden;
}

.calendar-body .calendar-body-head .calendar-body-head-page {
  box-sizing: border-box;
  color: #2e3033;
  display: flex;
}

.calendar-body .calendar-body-head .calendar-body-head-page .calendar-back,
.calendar-body .calendar-body-head .calendar-body-head-page .calendar-prev {
  border: 1px solid #c8cacc;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  height: 28px;
  text-align: center;
  width: 28px;
}

.calendar-body .calendar-body-head .calendar-body-head-page .calendar-date {
  border-bottom: 1px solid #c8cacc;
  border-top: 1px solid #c8cacc;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  height: 28px;
  line-height: 2.3;
  text-align: center;
  width: 65px;
}

.calendar-body {
  flex: 1;
  height: 100%;
  width: 100%;
  z-index: 2;
}

.calendar-body .calendar-body-head {
  border-left: 1px solid #e8e6e8;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding: 28px;
  position: relative;
  width: 100%;
}

.calendar-body .calendar-body-head .calendar-body-head-time {
  color: #2e3033;
  cursor: pointer;
  font-size: 32px;
  font-weight: 600;
  line-height: 24px;
}

.calendar-body .calendar-body-head .calendar-body-head-time-icon {
  height: 16px;
  margin: 5px;
  width: 16px;
}

.calendar-month .grid-head {
  border-left: 1px solid #e8e6e8;
  display: flex;
  justify-content: space-around;
  padding-right: 10px;
}

.calendar-month .grid-head .grid-head-column:first-child,
.calendar-month .grid-head .grid-head-column:last-child {
  color: #959da6;
}

.calendar-month .grid-head .grid-head-column {
  text-align: right;
  width: 14.28%;
}

.calendar-month .grid-body {
  border-bottom: 1px solid #e6e8eb;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  height: calc(100% - 19px);
  overflow: auto;
  position: relative;
}

.calendar-month .grid-body .currentMonth {
  color: #2e3033;
  font-weight: 700;
}

.calendar-month .grid-body .grid-cell {
  border-left: 1px solid #e6e8eb;
  border-top: 1px solid #e6e8eb;
  box-sizing: border-box;
  color: #959da6;
  cursor: pointer;
  display: flex;
  min-height: 66px;
  min-width: 50px;
  overflow: hidden;
  padding: 8px 3px 3px;
  position: relative;
  width: 14.28%;
}

.calendar-month .grid-body .grid-cell .grid-cell-head {
  box-sizing: border-box;
  display: flex;
  height: 20px;
  justify-content: space-between;
  padding: 0 7px;
  width: 100%;
}

.calendar-month .grid-body .grid-cell .grid-cell-head .gride-cell-head-number {
  align-items: center;
  display: flex;
}

.calendar-month .grid-body .grid-cell .currentMonthDate {
  margin-left: -6px;
  width: 20px;
}

.calendar-month .grid-body .grid-cell .time-date {
  cursor: default;
  font-weight: 400;
  height: 20px;
  line-height: 20px;
  margin: 0;
  text-align: center;
}

/* 高亮样式 */
.highlighted {
  background-color: #e0f7fa;
}
</style>
